<template>
  <div  v-if="block">
      <!-- <div v-if="block" class="center">
        <div  class="content">
            <div class="textTitle">{{this.block.textTitle}}</div>
            <div class="textCenter">{{this.block.textCenter}}</div>
            <img :src='this.block.textUrl' onerror="alert('图片加载失败，请检查您的网络状况')"/>
        </div>
        <div class="fixedMenu">
          <div>点击<b>“立即预约”</b>我们将为您匹配专属的客户经理，上门为您办理套餐入网开户，支持企业批量开户。</div>
          <x-button type="primary" id="subSever"  :gradients="['#1D62F0', '#19D5FD']" @click.native="toOrder">立即预约</x-button>
        </div>
      </div> -->
        <div class="detail">
            <!-- <p class="descTitle" v-if='block.textTitle != ""'><span>{{block.textTitle}}</span></p> -->
            <p class="descTitle" v-if="block.textTitle"><span>{{block.textTitle}}</span></p>
            <p class="textIndent desContent" v-if="block.textCenter">{{block.textCenter}}<img :src='block.textUrl'></p>
            <p class="textImg" v-if="!block.textCenter"><img :src='block.textUrl'></p>
            <p></p>

        </div>
       
        <div class="reserve">
            <div class="tipCnt" v-if='block.id == 10 || block.id == 18 '>点击<b>“立即预约”</b>我们将为您匹配专属的客户经理，与您取得联系。</div>
            <div class="tipCnt" v-else>点击<b>“立即预约”</b>我们将为您匹配专属的客户经理，上门为您办理套餐入网开户，支持企业批量开户。</div>
            <x-button type="primary" id="subSever"  :gradients="['#1D62F0', '#19D5FD']" @click.native="toOrder">立即预约</x-button>
        </div>
  </div>
</template>

<script>
  import { XButton} from 'vux'
  export default {
    data() {
      return {
        block:null
      }
    },
    mounted(){
      console.log(this.$route.params)
      let id=this.$route.params.id;
      this.block=this.$blocks.find(x=>x.id==id)

    },
    methods: {
      toOrder(){
        this.$router.push({name:'Order',params:{id:this.block.id}})
      }
    },
    components: {
      XButton,
    }
  }
</script>

<style lang="less" scoped>
body,html{
  text-align: center;
}
.title{
  font-size:1rem;
  text-align: center;
  margin:0 auto;
}
.detail p.desContent img{
  margin-bottom: 3rem;
}
.textImg{
  margin-bottom:5rem;
}
.textImg img{
  margin-bottom:5rem;
}
#subSever{
    background:#00b7ee !important;
    border:0px;
    color:#fff;
    width:9rem;
    height:1.5rem;
    border-radius:.1rem;
    font-size:.6rem;
    line-height: .5rem;
    text-align: center;
    margin:.3rem auto;
} 
// .bg{
//     width:100%;
// }
// .center{
//     width:100%;
// }
// .content{
//     margin:0px;
//     padding:0px;
// }
// .content img{
//     width:100vw;
//     margin-bottom:40%;
// }
// .fixedMenu{
//     width:100%;
//     height: 25%;
//     background:#fff;
//     position:fixed;
//     bottom:0px;
//     left:0px;
//     text-align: center;
//     // z-index:999;
// }
// .fixedMenu div{
//     margin:0.2rem;
//     font-size:.4rem;
//     line-height: .8rem;;
//     color:#333;
//     text-align: left;
// }
// #subSever{
//     background:#00b7ee !important;
//     border:0px;
//     color:#fff;
//     width:9rem;
//     height:1.5rem;
//     border-radius:.1rem;
//     font-size:.6rem;
//     line-height: .5rem;
//     text-align: center;
//     margin:.3rem auto;
// }
// .textTitle{
//     min-height:0px;
//     text-align: center;
//     font-size:.5rem;   
//     line-height:1.5rem;
// }
// .textCenter{
//     min-height:0px;
//     font-size:.5rem;
//     padding:0 .2rem;
//     line-height:1rem;
// }
// .weui-btn{
//     border-radius: 0px;
//     text-align: center
// }
</style>

